<template>
    <div class="roomList" v-loading="loading" style="width: 80%;">
        <span style="margin: 10px 0;">来看看{{ name }}中的其他房型吧</span><br />
        <el-card v-show="cardDisabled" class="box-card" shadow="hover" ><span >暂无更多推荐</span></el-card>
        <el-card v-show="cardDisabled == false" v-for="item in tableData" :key="item.id" @click="openDetail(item.id)"  class="box-card" shadow="hover">
            <template #header>
                <div class="card-header" style="display: flex;">
                    <div>{{ item.category }}</div>
                    <div style="flex: 1;"></div>
                    <div><span style="font-size: 10px;">价格(天)：</span>￥{{ item.price }}</div>
                </div>
            </template>
            <div>
                <el-image :src="item.banner" fit="contain" style="height: 120px;"></el-image>
            </div>
        </el-card>
        <!-- 分页 -->
        <div style="margin:10px 0" v-show="cardDisabled == false">
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :small="small"
                :disabled="disabled" :background="background" layout="total,  prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { toRef, ref, onMounted } from 'vue';
import request from '@/utils/request';
import { useRouter } from 'vue-router';

const loading = ref(true)
const props = defineProps({
    //子组件接收父组件传递过来的值
    name: String,
})
//使用父组件传递过来的值
// const {info} =toRefs(props)
const name = toRef(props, 'name')
// 分页
const currentPage = ref(1)
const pageSize = ref(10) //分页默认显示条数
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => { //改变每页数量
    console.log(`${val} items per page`)
    load()
}
const handleCurrentChange = (val: number) => { //改变当前页码位置
    console.log(`current page: ${val}`)
    load()
}

onMounted(() => {
    setTimeout(() =>{
        load()
    },2000)
})
const tableData = ref()
const load = () => {
    request.get('/h/room/byName', {
        params: {
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            name: name.value
        }
    }).then((res: any) => {
        if (res.code === '200') {
            // console.log(res);
            tableData.value = res.data.records
            total.value = res.data.total
            loading.value = false
            if(total.value > 0) {
                cardDisabled.value = false 
            }
        } else {
            loading.value = false
            cardDisabled.value = true
        }
    })
}

// 控制card显示
const cardDisabled = ref(true)
// 打开新的detail页
const router = useRouter()
const openDetail = (id:any) =>{
    router.push({
        name: 'detail',
        params: {id: id},
    })
}
</script>

<style scoped>
.box-card {
    margin: 10px 0;
    cursor: pointer;
}
</style>